<template>
	<view class="moive">
		<u-navbar class="ttp" title="选择影院" @leftClick="leftClick()" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="content">
			<view class="car_box">
				<view v-for="(item,index) in cilist" @click="choicemovie(item)" class="item">
					<view class="left">
						<view class="name">
							{{item.cinemaName}}
						</view>
						<view class="where">
							{{item.address}}
						</view>
					</view>
					<view class="right">
						<!-- <view class="price">
							<text style="color: red;font-size: 30rpx;">19.9元</text>
							<text class="qi">起</text>
						</view> -->
						<view class="juli">
							{{item.distance | distance}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFilmList,
		getCinema
	} from '@/api/oil'
	export default {
		data() {
			return {
				act: 0,
				cilist: [],
				userLatStr: '', //用户地点纬度
				userLngStr: '', //用户地点经度
				cid: '',
				moid: '',
			}
		},
		filters: {
			distance(text) {
				let str
				let num = parseInt(text)
				if (num < 1000) {
					str = num + '米'
				} else {
					let s1 = num.toString()
					let s2 = s1.slice(0, 1)
					let s3 = s1.slice(1, 2)
					str = s2 + '.' + s3 + '公里'
				}
				return str
			}
		},
		onLoad(option) {
			console.log(option)
			this.cid = option.cid;
			this.moid = option.id;
			this.userLatStr = option.userLatStr;
			this.userLngStr = option.userLngStr;
			this.getCinema()
			// console.log(decodeURIComponent(option.id), decodeURIComponent(option.city))
			// console.log(option.id, option.city)
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		_that.oilitem.userLatStr = res.longitude;
			// 		_that.oilitem.userLngStr = res.latitude;
			// 		// console.log('当前位置的经度：' + res.longitude);
			// 		// console.log('当前位置的纬度：' + res.latitude);
			// 		_that.oillist()
			// 	}
			// });
		},
		methods: {
			getFilmList() {
				let sss = {
					type:0,
					cityid:this.cid
				}
				getFilmList(sss).then(res => {
					if (res.success == 1) {
						this.molist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			getCinema() {
				let data = {
					cityId: this.cid,
					longitude: this.userLngStr,
					latitude: this.userLatStr,
					filmId:this.moid
				}
				getCinema(data).then(res => {
					if (res.success == 1) {
						this.cilist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			tabs(i) {
				this.act = i;
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				uni.navigateBack({})
			},
			choicemovie(item){
				console.log(item.id)
				uni.navigateTo({
					url: `./moviechoice2?moiveid=${this.moid}&cinemaid=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
	}

	.ttp{
		padding-top: var(--status-bar-height);
	}

	.moive {
		width: 100%;

		.content {
			padding: 0;

			.car_box {
				width: 100%;

				.item {
					background: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25rpx 15rpx;
					// margin-bottom: 20rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);

					.left {
						width: 80%;

						.name {
							font-size: 32rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 10rpx;
						}

						.where {
							color: rgba(0, 0, 0, 0.5);
							font-size: 27rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.right {
						width: 15%;
						text-align: right;

						.juli {
							padding-top: 30rpx;
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.25);
						}

						.qi {
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.25);
						}
					}
				}
			}
		}
	}
</style>
